<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>设置交易密码</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer.js"></script>

	<style type="text/css">
		* {
			margin: 0rem;
			padding: 0rem;
			text-decoration: none;
			list-style: none;

		}

		html,
		body {
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*font-size:  100rem;*/
			font-size: calc(100vw / 7.5);
			font-family: "microsoft yahei";
		}

		/*头部*/

		.wrapper .header {
			display: flex;
			width: 100%;
			height: 0.88rem;
			background: #809fba;
		}

		.wrapper .header div {
			height: 100%;
			font-size: 0.30rem;
			text-align: center;
			line-height: 0.88rem;
			color: #fff;
		}

		.con {
			flex: 8;
		}

		.arrow img {
			width: 0.41rem;
			height: 0.3rem;
			display: inline-block;
		}

		.dot img {
			width: 0.41rem;
			height: 0.09rem;
			display: inline-block;
			margin-bottom: 3px;
		}

		.arrow {
			flex: 1;
			/* background: url("../img/arrow.png") no-repeat center; */
			background-size: contain;
		}

		.dot {
			flex: 1;
		}

		/*内容*/

		.content {
			width: 100%;
			position: relative;
			min-height: 10.8rem;
		}

		.content form {
			width: 100%;
		}

		.content form .info {
			box-sizing: border-box;
			height: 1rem;
			line-height: 1rem;
			width: 96%;
			margin-left: 3%;
			color: #9a9a9a;
			border-color: #fff;
			font-size: 0.28rem;
			border-bottom: 1px solid #e9f0f0;
		}

		.content form .sub {
			position: absolute;
			bottom: 0.8rem;
			left: 0.64rem;
			width: 6.25rem;
			height: 0.9rem;
			background: #7f9eba;
			color: #fff;
		}
		/* 头部 */
		/* #chneg{
		box-sizing: border-box;
		padding: 0rem 0.1rem;
		display: flex;
		width: 100% ;
		height: 0.88rem;
		background: #809fba;
	} */
	.wrapper .header{
		/* position: fixed;
		top:0rem;
		left: 0rem; */
		box-sizing: border-box;
		padding: 0rem 0.1rem;
		display: flex;
		width: 100% ;
		height: 0.88rem;
		background: #809fba;
	}	
	.wrapper .header div{
		height: 100%;
		font-size: 0.30rem;
		text-align: center;
		line-height: 0.88rem;
		color: #fff;
	}
	.con{
		flex: 8;
	}
	.arrow img{
		width: 0.41rem;
		height: 0.3rem;
		display: inline-block;
	}
	.dot img{
		display: none;
		width: 0.41rem;
		height: 0.09rem;
		display: inline-block;
		margin-bottom: 0.03rem;
	}
	.arrow{
		flex: 1;
		/* background: url("../img/arrow.png") no-repeat center; */
		background-size: contain;
	}
	.dot{
		flex: 1;
	}
	</style>
</head>

<body>
	<div class="wrapper" id="wrapper">
		<div class="wrapper">
			<div class="header">
				<div class="arrow">
					<img src="../img/arrow.png" alt="">
				</div>
				<div class="con">设置交易密码</div>
				<div class="dot">
					<img src="../img/dot.png" alt="">
				</div>
			</div>
		</div>

	</div>
	<div class="content">
		<form action="#" method="post">
			<input type="password" name="nicheng" class="info" id="old_pay_password" value="" placeholder="请输入原交易密码" />
			<input type="password" name="nicheng" class="info" id="new_pay_password" value="" placeholder="请输入新交易密码" />
			<input type="password" name="nicheng" class="info" id="verify_pay_password" value="" placeholder="请再次输入新交易密码" />
			<input type="button" class="sub" value="确认">
		</form>
	</div>




	<script src="../js/mui.min.js"></script>
	<script>
		$(".arrow").on("tap", function () {
			window.location.href = "anquanzhongxin.html";
		})

		$.ajax({
			type:"GET",
			url:`${localStorage.top}api/UserCenter/check_pay_password?TOKEN=${localStorage.token}`,
			success: function(data){
				console.log(data)
				if(data.code ==localStorage.erro){
					$("#old_pay_password").css("display","none");
					$("#wrapper").find(".con").html("设置交易密码")
				}else{
					$("#wrapper").find(".con").html("设置交易密码")	
				}
			}
		})

		$(".sub").on("click", function () {
			var old_pay_password = $("#old_pay_password").val();
			var new_pay_password = $("#new_pay_password").val();
			var verify_pay_password = $("#verify_pay_password").val();
			console.log(old_pay_password)
			$.ajax({
				type: "POST",
				url: `${localStorage.top}api/UserCenter/change_pay_password`,
				data: {
					"TOKEN": `${localStorage.token}`,
					"old_pay_password": old_pay_password,
					"new_pay_password": new_pay_password,
					"verify_pay_password": verify_pay_password
				},
				success: successed
			});

		})

		function successed(data) {
			console.log(data)
			if (data.code == localStorage.erro) {
				layer.msg(data.msg)
			} else if (data.code == localStorage.success) {
				layer.msg(data.msg);
				setTimeout(function(){
					$(".arrow").trigger("tap")
				},500)
			}
		}
	</script>
</body>

</html>